<template>
    <div v-if="model" class="editView">
        <div style="margin-bottom:2.778vw"><nav-bar :userImg = "model.user_img"></nav-bar></div>

       <div class="uploadfile">
            <van-uploader class="uploadimg" preview-size="100vw" :after-read="afterRead" />
            <edit-banner left="头像">
                <img :src="model.user_img" slot="right" alt="" v-if="model.user_img">
                <img src="@/assets/default.jpeg" slot="right" alt="" v-else>
            </edit-banner>
       </div>
        <edit-banner left="昵称" @bannerClick="show = true">
            <a href="javascript:;" slot="right">{{model.name}}</a>
        </edit-banner>
        <edit-banner left="账号">
            <a href="javascript:;" slot="right">{{model.username}}</a>
        </edit-banner>
        <edit-banner left="性别" @bannerClick="gendershow = true">
            <a href="javascript:;" slot="right">{{model.gender == 1 ? "男" : "女"}}</a>
        </edit-banner>
        <edit-banner left="出生日期"></edit-banner>
        <edit-banner left="个性签名" @bannerClick="textshow = true">
            <a href="javascript:;" slot="right">{{model.user_desc}}</a>
        </edit-banner>
        <van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmclick" @cancel="content = ''">
            <van-field v-model="content" autofocus />
        </van-dialog>
        <van-dialog v-model="textshow" title="个性签名" show-cancel-button @confirm="scconfirmclick" @cancel="content = ''">
            <van-field v-model="content" autofocus />
        </van-dialog>

        <div class="editback" @click="$router.back()">返回</div>
        <div class="editback" @click="downout">登出</div>

        <van-action-sheet v-model="gendershow" cancel-text="取消" :actions="actions" @select="onSelect" />
    </div>
</template>
<script>
import NavBar from '../components/common/NavBar.vue'
import editBanner from '../components/common/editBanner.vue'
export default {
    components:{
        NavBar,
        editBanner,
    },
    data(){
        return{
            model:{},
            show:false,
            textshow:false,
            content:'',
            gendershow:false,
            actions:[
                {name:'男',value:1},
                {name:'女',value:0},
            ],
        }
    },
    methods: {
        async selectUser(){
            const res = await this.$http.get('/user/' + localStorage.getItem('id'))
            this.model = res.data[0]
        },
        async afterRead(file){
            const fromdata = new FormData()
            fromdata.append("file", file.file)
            const res = await this.$http.post('/upload', fromdata)
            this.model.user_img = res.data.url
            this.userUpdate()
        },
        async userUpdate(){
            const res = await this.$http.post('/update/' + localStorage.getItem('id'), this.model)
            if(res.data.code == 200){
                this.$msg.success("修改成功")
            }
        },
        confirmclick(){
            this.model.name = this. content
            this.userUpdate()
            this.content = ''
        },
        scconfirmclick(){
            this.model.user_desc = this.content
            this.userUpdate()
            this.content = ''
        },
        onSelect(data){
            console.log(data);
            this.model.gender = data.value
            this.userUpdate()
            this.gendershow = false
        },
        downout(){
            localStorage.setItem('token', '')
            location.reload();
        }
    },
    created(){
        this.selectUser()
    },
}
</script>
<style lang="scss">
.editView{
    a{
        color:#000;
    }
    img{
        height: 12.778vw;
        width: 12.778vw;
    }
    .uploadfile{
        position: relative;
        overflow: hidden;
        .uploadimg{
            opacity: 0;
            position: absolute;
        }
    }
    .editback{
        margin-top: 5.556vw;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        color: #999;
        padding: 4.167vw 0;
        font-size: 5vw;
    }
}
</style>